import React, { useRef } from "react";

const ChatForm = ({ chatHistory, setChatHistory, generateBotResponse }) => {
  // 使用 useRef 来获取输入框的当前值
  const inputRef = useRef();

  // 表单提交处理函数
  const handleFormSubmit = (event) => {
    // 阻止默认的表单提交行为
    event.preventDefault();
    // 获取用户输入的消息，并去除前后的空格
    const userMessage = inputRef.current.value.trim();
    // 如果用户没有输入消息，直接返回
    if (!userMessage) {
      return;
    }
   
    // 清空输入框的内容
    inputRef.current.value = "";

    // 调用父组件传递下来的函数，更新聊天记录
    // 将用户的消息添加到聊天记录中
    setChatHistory((history) => [
      ...history, // 保留原有的聊天记录
      { role: "user", text: userMessage } // 添加新用户消息
    ]);

    // 延迟600ms后展示"thinking..."，并生成机器人的回答
    setTimeout(() => {
      // 在聊天记录中添加"thinking..."消息
      setChatHistory((history) => [
        ...history, // 保留原有的聊天记录
        { role: "model", text: "thinking..." } // 添加机器人的思考提示
      ]);

      // 调用生成机器人响应的函数，并传递更新后的聊天记录 AIzaSyBmbvyUxzl5zrGQdauh57qHiTxADf7bzkQ
      generateBotResponse([...chatHistory, { role: "user", text: userMessage }]);
    }, 600);
  }

  return (
    <form action="#" className="chat-form" onSubmit={handleFormSubmit}>
      <input ref={inputRef} role="text" placeholder="Message..." className="message-input" required />
      <button><span className="iconfont icon-shang"></span></button>
    </form>
  );
}

export default ChatForm;
